<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>首页 - 个人选股系统 V5.87</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<script type="text/javascript" src="../js/jquery-1.12.4.min.js" ></script>

	</head>

	<body>
		<div class="navbar navbar-inverse navbar-static-top ">
			<div class="container">
				<div class="navbar-header">
					<button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                 </button>
					<a href="#" class="navbar-brand">选股系统</a>
				</div>
				<div class="collapse navbar-collapse" id="mymenu">
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="">股票信息</a>
						</li>
						<li>
							<a href="/center.html">个人中心</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="container" id="container">

			<div class="container-fluid">
				<table class="table table-hover">
					<tr>
						<th>序号</th>
						<th>股票代码</th>
						<th>股票简称</th>
						<th>涨跌幅</th>
						<th>换手率</th>
						<th>最新价(元)</th>
						<th>前期高点</th>
						<th>前期高点日期</th>
					</tr>
					<!--<tr>
	            		<td>1</td>
	            		<td>000007</td>
	            		<td>全新好</td>
	            		<td>10.01%</td>
	            		<td>4.40%</td>
	            		<td>全新好</td>
	            		<td>16.05</td>
	            		<td>2017-07-18</td>
	            	</tr>-->
				</table>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$.ajax({
				url: 'list.json',
				dataType: 'json'
			})
			.done(function(data) {
				//以后做读取数据的，循环数据的，不要着急去写循环。先通过层层找的，找到某一条数据后，再去写循环。
				//console.log(data.list[2].name);  读取到某条数据的name属性
				//console.log(data)
				//data.list保存了所有的信息
				for(var i = 0; i < data.list.length; i++) {
					//					console.log(data.list[i].name)  输出每一条数据的name属性
					//保存dom的结构
					var list =
						'<tr>' +
						'<td>' + data.list[i].id + '</td>' +
						'<td>' + data.list[i].code + '</td>' +
						'<td>' + data.list[i].name + '</td>' +
						'<td>' + data.list[i].crate01 + '</td>' +
						'<td>' + data.list[i].crate02 + '</td>' +
						'<td>' + data.list[i].crate03 + '</td>' +
						'<td>' + data.list[i].hight + '</td>' +
						'<td>' + data.list[i].hightDate + '</td>' +
						'</tr>';
					//把所有的数据，追加到table标签中
					$('table').append(list);
				}
			})
			.fail(function() {
				alert('2')
			})
	</script>

</html>